<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="童佳豪">
    <title>练习08 播放音视频</title>
</head>
<style>
    body {
        text-align: center;
    }
</style>
<body>
<div>
    <span>选择课程：</span>
    <select id="video_name">
        <option value="./素材/5.2.2绘制矩形.mp4">5.2.2绘制矩形.mp4</option>
        <option value="./素材/5.2.3绘制圆形.mp4">5.2.3绘制圆形.mp4</option>
        <option value="./素材/5.2.4绘制三角形.mp4">5.2.4绘制三角形.mp4</option>
    </select>
    <input type="button" value="播放视频" onclick="loadview()">
</div>
<video id="video" autoplay controls>
    <source id="source">
</video>
</body>
<script>
    function loadview() {
        var video_name = document.getElementById("video_name");
        var index = video_name.selectedIndex;
        var src = video_name.options[index].value;
        var video = document.getElementById("video");
        var source = document.getElementById("source");
        source.src = src;
        video.load();
    }
</script>
</html>